<template>
  <div class="terminal-detail-view">

    <el-form
      v-if="datas.planInfo.planStatus > 2"
      :inline="true"
      class="filter-form-inline"
      label-position="right"
      size="small"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px;margin-right:0px;"
      >
        <el-col :span="4">
          <el-form-item
            label="全部终端："
            style="width: 100%;"
          >
            <span>{{ tableData.length }}</span>
          </el-form-item>
        </el-col>
        <!--
        <el-col :span="4">
          <el-form-item
            label="已开发："
            style="width: 100%;"
          >
            <span>{{ statisticalNum.develops }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="待进货："
            style="width: 100%;"
          >
            <span>{{ statisticalNum.noProduct }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="开发中："
            style="width: 100%;"
          >
            <span>{{ statisticalNum.develop }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label="待开发："
            style="width: 100%;"
          >
            <span>{{ statisticalNum.noDevelop }}</span>
          </el-form-item>
        </el-col>
        -->
      </el-row>
    </el-form>

    <el-table
      :data="tableData"
      border
      header-cell-class-name="table-header"
      @row-click="rowClick"
    >
      <el-table-column
        fixed="left"
        align="center"
        header-align="center"
        label="序号"
        type="index"
        width="50"
      />
      <el-table-column
        fixed="left"
        align="left"
        header-align="center"
        label="终端名称"
        min-width="150px"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span
            class="terminal-link"
            @click.stop="terminalClick(scope.row)"
          >
            {{ scope.row.terminalName }}
          </span>
          <!--          <el-link-->
          <!--                  v-if="scope.row.terminalId"-->
          <!--                  style="width: 100%"-->
          <!--                  :underline="false"-->
          <!--                  type="primary"-->
          <!--                  @click.stop="terminalClick(scope.row)"-->
          <!--          >-->
          <!--            <div style="max-width: 80%;overflow: hidden; text-overflow: ellipsis">{{ scope.row.terminalName }}</div>-->
          <!--          </el-link>-->
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="所在地区"
        prop="area"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span>{{ scope.row.terProvinceName }}/{{ scope.row.terCityName }}/{{ scope.row.terAreaName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="营销体量"
        min-width="100px"
      >
        <template #default="scope">
          {{ getLabel('sales_volume', scope.row.salesVolume) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="开发期限截至日期"
        width="150px"
        prop="address"
      >
        <template #default="scope">
          {{ dateFormat('yyyy-mm-dd', scope.row.expireTime) }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="开发保证金(元)"
        width="150px"
        prop="address"
      >
        <template #default="scope">
          <span v-if="scope.row.devEarnestMoney">{{ scope.row.devEarnestMoney }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        label="最低销量"
        min-width="120px"
        prop="address"
      >
        <template #default="scope">

          <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{
            getLabel('sell_unit', datas.planInfo.sellUnit)
          }}/{{ getLabel('sell_num_unit', scope.row.minSaleUnit) }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        header-align="center"
        width="150px"
        label="销量保证金(元)"
      >
        <template #default="scope">

          <span v-if="scope.row.sellEarnestMoney">{{ scope.row.sellEarnestMoney }}</span>
          <span v-else>未设置</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="datas.planInfo.planStatus <= 2"
        align="center"
        header-align="center"
        label="其他说明"
      >
        <template #default="scope">
          {{ scope.row.remark }}
        </template>
      </el-table-column>
      <!--
      <el-table-column
        v-if="!isAudit && datas.planInfo.planStatus > 2"
        align="left"
        header-align="center"
        label="代理商名称"
        min-width="150px"
        prop="address"
        show-overflow-tooltip
      >
        <template #default="scope">
          <span
            v-if="scope.row.agentId"
            class="terminal-link"
            @click.stop="agentClick(scope.row)"
          >
            {{ scope.row.agentName }}
          </span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isAudit && datas.planInfo.planStatus > 2"
        align="center"
        header-align="center"
        label="营销模式"
        min-width="100px"
        prop="address"
      >
        <template #default="scope">
          <span v-if="scope.row.sellMode == 'direct'">终端直销</span>
          <span v-else-if="scope.row.agentAttribute == 1">独家招商</span>
          <span v-else-if="scope.row.agentAttribute == 2">精细招商</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isAudit && datas.planInfo.planStatus > 2"
        align="center"
        header-align="center"
        label="配送商"
        min-width="150px"
        prop="address"
      >
        <template #default="scope">
          <distributors-view
            v-if="scope.row.distributeContractDetails && scope.row.distributeContractDetails.length"
            :datas="scope.row.distributeContractDetails"
            :unit="datas.planInfo.sellUnit"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isAudit && datas.planInfo.planStatus > 2"
        align="center"
        header-align="center"
        label="注册日期"
        min-width="100px"
      >
        <template #default="scope">
          <span v-if="scope.row.agentRegisterTime">{{ dateFormat('yyyy-mm-dd', scope.row.agentRegisterTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="!isAudit && datas.planInfo.planStatus > 2"
        align="center"
        header-align="center"
        label="开发状态"
        prop="address"
        width="100"
        fixed="right"
      >
        <template #default="scope">
          {{ getLabel('fine_plan_detail_status', scope.row.detailStatus) }}
        </template>
      </el-table-column>
      -->
    </el-table>

    <detail-drawer
      ref="detailDrawer"
      :size-width="1000"
      custom-title
    >

      <template #title>
        <span style="font-size: 16px; margin-right: 20px">开发详情：{{ selectData.terminalName }}</span>
        <el-tag
          size="small"
          type="warning"
        >{{ getLabel('fine_plan_detail_status', selectData.detailStatus) }}
        </el-tag>
      </template>

      <template #contents>

        <item-title title="招商终端开发信息" />

        <terminal-info
          :datas="selectData"
          :is-audit="isAudit"
          :plan="datas"
        />

        <div v-if="!isAudit && selectData.detailStatus >= 2">

          <item-title title="当前开发渠道客户信息" />

          <agent-info-view
            :datas="selectData"
            :unit="datas.planInfo?.sellUnit"
          />

          <item-title title="配送商信息" />

          <distributor-table
            :list="selectData.distributeContractDetails"
            :unit="datas.planInfo?.sellUnit"
          />

          <item-title
            style="margin-top: 20px"
            title="开发记录"
          />

          <develop-view :id="selectData.id" />
        </div>

      </template>
    </detail-drawer>

    <detail-drawer
      ref="agentDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>

        <span v-if="selectData.agentType == 'agent'">代理商：{{ selectData.agentName }}</span>
        <span v-else>兼职：{{ selectData.agentName }}</span>

      </template>
      <template #contents>

        <agent-info :id="selectData.agentId" />

      </template>
    </detail-drawer>

    <detail-drawer
      ref="terminalDrawer"
      :size-width="1000"
      custom-title
    >
      <template #title>

        <span>终端：{{ selectData.terminalName }}</span>

      </template>
      <template #contents>

        <terminal-info-view :id="selectData.terminalId" />

      </template>
    </detail-drawer>

  </div>
</template>

<script>
import {
  defineAsyncComponent,
  defineComponent,
  getCurrentInstance,
  reactive,
  ref,
  toRefs,
  watch,
} from 'vue'

export default defineComponent({
  name: 'TerminalDetail',
  components: {
    terminalInfo: defineAsyncComponent(() => import('./terminalInfo.vue')),
    agentInfoView: defineAsyncComponent(() => import('./agentInfoView.vue')),
    agentInfo: defineAsyncComponent(() =>
      import('../../../../commonView/detailComponents/agent/agentInfo.vue')
    ),
    terminalInfoView: defineAsyncComponent(() =>
      import(
        '../../../../commonView/detailComponents/terminal/terminalInfo.vue'
      )
    ),
  },
  props: {
    datas: {
      type: Object,
      default: {},
    },
    isAudit: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const instance = getCurrentInstance()
    var detailDrawer = ref(null)

    var data = reactive({
      tableData: [],
      statisticalNum: {
        noDevelop: 0,
        noProduct: 0,
        develops: 0,
        develop: 0,
      },
      selectData: {},
      agentDrawer: null,
      terminalDrawer: null,
    })

    const rowClick = (val) => {
      console.log(val)
      if (props.isAudit && props.datas.planInfo.planStatus <= 2) {
        return
      }
      data.selectData = val

      detailDrawer.value.open()
    }

    const appClick = (row) => {
      instance.appContext.config.globalProperties.$mountContent({
        id: 'sdsdawe',
        type: 1,
      })
    }

    const agentClick = (row) => {
      data.selectData = row
      data.agentDrawer.open()
    }

    const terminalClick = (row) => {
      data.selectData = row
      data.terminalDrawer.open()
    }

    const distributeClick = (distribute) => {}

    watch(
      props,
      (newValue, oldValue) => {
        // 直接监听
        if (newValue.datas && newValue.datas.planDetail) {
          data.tableData = newValue.datas.planDetail

          data.tableData.forEach((item) => {
            if (item.detailStatus == 1) {
              data.statisticalNum.noDevelop++
            } else if (item.detailStatus == 2) {
              data.statisticalNum.develop++
            } else if (item.detailStatus == 3) {
              data.statisticalNum.noProduct++
            } else if (item.detailStatus == 4) {
              data.statisticalNum.develops++
            }
          })
        }
      },
      { deep: true, immediate: true }
    )

    const getState = (state) => {
      if (!state) {
        return ''
      }
      switch (state) {
        case 1:
          return '待开发'
        case 2:
          return '开发中'
        case 3:
          return '待进货'
        case 4:
          return '开发成功'
        case 5:
          return '开发失败'
      }
    }

    const getMainState = (state) => {
      if (!state) {
        return ''
      }
      switch (state) {
        case '-1':
          return '审核未通过'
        case '1':
          return '草稿'
        case '2':
          return '审核中'
        case '3':
          return '进行中'
        case '4':
          return '已结束'
      }
    }

    return {
      ...toRefs(data),
      detailDrawer,

      rowClick,
      appClick,
      getState,
      agentClick,
      distributeClick,
      getMainState,
      terminalClick,
    }
  },
})
</script>

<style lang="scss" scoped>
@import "@/style/basics.scss";

.mainColor {
  color: $active-color;
}

.terminal-link {
  color: $main-color;
  cursor: pointer;
}
</style>
